<template>
  <el-button type="success" size="small" v-else @click="handleClick" :id="id">
    {{ !isLogin ? '登录 Google' : '登出 Google' }}
  </el-button>
</template>

<script>
let componentId = 0;
import GoogleAuth from './GoogleAuth';
import {listAccessibleCustomers} from '@/api/google/googleAds'

export default {
  name: 'GoogleLogin',
  props: {
    params: {
      type: Object,
      required: true
    },
    /* offline: {
      type: Boolean,
      default: false
    }, */
    getGoogleAccounts: {
      type: Function,
      default: () => {
      }
    },
  },
  data() {
    return {
      item: '登录 Google',
      isLogin: false,
      accessToken: "",
      googleUser: null,
    }
  },
  beforeCreate() {
    this.id = `google-signin-btn-${componentId++}`;
  },
  watch: {
    // isLogin:{
    //   handler(newVal){
    //     if (newVal){
    //       this.item="登出 Google";
    //     }else {
    //       this.item='登录 Google ';
    //     }
    //   }
    // }
  },
  methods: {
    handleClick() {
      if (GoogleAuth.isSignedIn()) {
        this.loginOut();
      } else {
        this.login();
      }

    },
    login() {
      GoogleAuth["signIn"]().then(result => {
        console.log(result)
        this.isLogin = true;
        this.googleUser = GoogleAuth.currentUser()
        this.$emit("status", {
          isLogin: this.isLogin,
          user: this.googleUser
        })
        // this.queryGoogleAccount();
      }).catch(err => {
        console.log("login error", err)
      });

    },
    loginOut() {
      GoogleAuth["signOut"]().then(result => {
        this.isLogin = false;
        this.accessToken = "";
        this.$emit("status", {
          isLogin: this.isLogin,
        })
      }).catch(err => {
        console.log("loginout error", err)
      });
    },
    getAccessToken() {
      return this.accessToken;
    },
    getAdsAccount() {
      this.accessToken = this.googleUser.xc.access_token;
      return new Promise((resolve, reject) => {
        listAccessibleCustomers({
            accessToken: this.accessToken,
            developerToken: this.params.developerToken
          },
          (res) => {
            let response = JSON.parse(res.currentTarget.response)
            // this.getGoogleAccounts(response);
            resolve(response);
          },
          (err) => {
            // this.$message.error("获取账户失败，请确认您已开启VPN并能正常访问Google")
            reject(err);
          }
        )
      });
    }

  },
  mounted() {
    GoogleAuth.load(this.params).then(() => {
      if (GoogleAuth.isSignedIn()) {
        this.isLogin = true;
        this.googleUser = GoogleAuth.currentUser()
        // this.queryGoogleAccount();
      } else {
        this.isLogin = false;
        this.accessToken = "";
      }
      this.$emit("status", {
        isLogin: this.isLogin,
        user: this.googleUser
      })
    }).catch(err => {
      console.log(err);
    });
  }
}
</script>

<style>
.google-button {
  width: 150px;
  height: 50px;
  border: solid 1px black;
  background-color: #1e9fff;
}

.google-button img {
  float: left;
  width: 20px;
  height: 20px;
  position: relative;
  top: 25%;
}

.google-button p {

}
</style>
